<template>
  <div class="searchitem">
        <form action="/">
          <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>

    <van-tabs v-model="activeName" @click="tiao(activeName)">
    <van-tab title="作品" name="a">

        <van-dropdown-menu >
          <van-dropdown-item @change="change(option1)" v-model="value1" :options="option1" />
        </van-dropdown-menu>

        <div class="xiangsi">
           <div class="sicentent" v-for="(item,index) in zuopin" :key="index" @click="xiangsi(item.id)">
               <img  :src="item.cover" alt="">
               <div class="centent-left">
                   <p class="p5">{{item.title}}</p>
                   <p class="p6">播放&nbsp;{{bofang[index]}}&nbsp;&nbsp;喜欢&nbsp;{{xihuan[index]}}</p>
                   <div class="authord">
                    <img class="imgauthor" :src="item.author.userinfo.avatar" alt="">
                   <span>{{item.author.userinfo.username}}</span>
                   </div>   
               </div>
           </div>
        </div>

    </van-tab>

          <van-tab title="创作人" name="b">
             <div class="author">
                <div class="authoritem" v-for="(item,index) in author" :key="index">
                    <img :src="item.avatar" alt="" @click="tiaoauthor(item.id)">
                    <div class="authorcentent">
                        <p class="p1">{{item.username}}</p>
                        <p class="p2">{{item.occupation}}&nbsp;·&nbsp;粉丝{{item.count.count_follower}}</p>
                    </div>
                    <div class="guanzhu">关注</div>
                </div>
             </div>
          </van-tab>
        </van-tabs>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
    created(){
      this.getsearchitem(this.$route.query.name)
    },
    data() {
      return {
        activeName: 'a',
        value: this.$route.query.name,
        zuopin:[],

        author:[],

        bofang:[],
        xihuan:[],

        value1: 0,
        value2: 'a',
        option1: [
          { text: '最热门', value: 0,type:'hot' },
          { text: '最匹配', value: 1 ,type:'default'},
          { text: '新发布', value: 2,type: 'addtime' },
        ],

        type:'',
        

        
      
      };
    },
   methods: {
    //创作人
    tiao(titlename){
      
       if(titlename==="b"){
           this.getauthor(this.$route.query.name)
       }
    },
    //创作人详情页
    tiaoauthor(id){
       this.$router.push({name:'author',query:{id:id}})
    },
    //菜单改变
    change(name){
      this.type=this.option1[this.value1].type
      this.getsearchtwo(this.$route.query.name,this.type)
    },
    onSearch(val) {
       this.getsearchitem(val)
       this.getauthor(val)
    },
    onCancel() {
      this.$router.push({name:'faxian'})
    },
    //视频点赞数
       formatNumber(num) {
      num = Number(num);
      if (num == 0) {
        return num + "";
      } else if (num >= 1 && num <= 10000) {
        return num + "";
      } else {
        return (num / 10000).toFixed(1) + "w";
      }
       },


        getsearchitem(value){
           this.axios({
               method:'get',
               url:'https://apis.netstart.cn/xpc/search?type=article&kw='+value,
               params:{
                  sort:'hot'
               }
           }).then(result=>{
               this.zuopin=result.data.data.list
               this.zuopin.forEach(v => {
                   let bofang=this.formatNumber(v.count.count_view);
                   let xihuan=this.formatNumber(v.count.count_like)
                   this.bofang.push(bofang)
                   this.xihuan.push(xihuan)
               });
           }).catch(err=>{
              
           })
       },


       getsearchtwo(value,type){
           this.axios({
               method:'get',
               url:'https://apis.netstart.cn/xpc/search?type=article&kw='+value,
               params:{
                  sort:type
               }
           }).then(result=>{
               this.zuopin=result.data.data.list
               
               this.zuopin.forEach(v => {
                   let bofang=this.formatNumber(v.count.count_view);
                   let xihuan=this.formatNumber(v.count.count_like)
                   this.bofang.push(bofang)
                   this.xihuan.push(xihuan)
               });
           }).catch(err=>{
            
           })
       },
       
       //获取作者页面
       getauthor(value){
           this.axios({
               method:'get',
               url:'https://apis.netstart.cn/xpc/search?type=creator&kw='+value
           }).then(result=>{
               this.author=result.data.data.list
               
           }).catch(err=>{
              
           })
       },
        //跳转视频详情页面
        xiangsi(id){
       
          this.$router.push({name:'message',query:{id:id}})
       },
  },
}
</script>

<style lang="less" scoped>
.xiangsi{
    width: 90%;
    margin-top: 20px;
    margin-left: 15px;
    p{
    width: 100%;
    height: 20px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
    }
    .sicentent{
        width: 100%;
        height: 110px;
        display: flex;
        margin-bottom: 20px;
        img{
            width: 180px;
            height: 110px;
            border-radius: 10px;
        }
        .centent-left{
            width: 50%;
            height: 100px;
            .p5{
               text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              font-size: 15px;
            }
            .p6{
                margin-top: -3px;
                font-size: 12px;
                font-weight: 500;
                color: rgb(172, 168, 168);
            }
            .authord{
                display: flex;
                align-items: center;
                margin-top: -5px;
            }
            .imgauthor{
                width: 25px;
                height: 25px;
                border-radius: 50%;
                border: 1px solid #ddd;
                margin-left: 10px;
                margin-top: 0px;
            }
            span{
                margin-top: 0px;
                margin-left: 10px;
            }
        }
    }
   
}

.van-dropdown-menu{
    width: 25%;
    height: 30px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 15px;
    .van-dropdown-item{
       width: 100%;
       height: 20px;
    }
}
.author{
    width: 90%;
    margin-left: 15px;
    .authoritem{
        width: 100%;
        height: 100px;
        display: flex;
        border-bottom: 1px solid #ddd;
        align-items: center;
        img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid #ddd;
        }
        .authorcentent{
            width: 60%;
            height: 60px;
            margin-left: 10px;
            .p1{
               font-size: 17px;
               font-weight: bold;
               margin-top: 5px;
               text-overflow: ellipsis;
               display: -webkit-box;
               -webkit-box-orient: vertical;
               -webkit-line-clamp: 1;
               overflow: hidden;
            }
            .p2{
                margin-top: -5px;
                color: rgb(156, 154, 154);
            }
        }
        .guanzhu{
            width: 25%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 15px;
            color: red;
            border-radius: 15px;
            background-color: rgb(251,238,232);
        }
    }
}
</style>